<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>teleport</title>
</head>
<body>

<div id="app">
    <div style="width: 200px;height: 200px;background: red" id="endofbody">
        this is a test
    </div>
    <parent-component></parent-component>
</div>

<script src="../vue.global.js"></script>
<script>
    const app = Vue.createApp({
        // template: `
        // <h1>root instance</h1>
// <!--        <parent-component></parent-component>-->
//         `
    })

    app.component("parent-component", {
        template: `

        <h2>this is a parent component</h2>
         <teleport to="#endofbody">
        <child-component name="张三"></child-component>
        </teleport>
        `
    })
    app.component("child-component", {
        props: {
            name: String,
        },
        template: `Hello {{name}}`
    })

    app.mount("#app")
</script>

</body>
</html>